<template>
	<view class="container">
		
		<tui-list-cell unlined :hover="false">
			<view class="tui-flex-box">
				<!-- <image :src="webURL+'img_order_address3x.png'" class="tui-icon-img"></image> -->
				<view class="tui-addr">
					<view class="tui-addr-userinfo">{{orderInfo.name}}<text class="tui-addr-tel">{{orderInfo.phone}}</text></view>
					<view class="tui-addr-text">{{orderInfo.address}}</view>
				</view>
			</view>
		</tui-list-cell>

		<view class="tui-order-item">
			<!-- <tui-list-cell :hover="false" :lineLeft="false">
				<view class="tui-goods-title">
					商品信息
				</view>
			</tui-list-cell> -->
			<block v-for="(item,index) in orderInfo.details" :key="index">
				<tui-list-cell padding="0">
					<view class="tui-goods-item">
						<image :src="item.rec_pic" class="tui-goods-image"></image>
						<view class="tui-goods-center ml15">
							<view >
								<!-- <view > -->
									<view class="tui-goods-name tui-size-28">{{item.name}}</view>
									<!-- <view class="tui-goods-attr">黑色，50ml</view> -->
								<!-- </view> -->
								<view class="tui-price-right">
									<view class="font-color-main tui-size-22">￥{{item.amount}}</view>
									<!-- <view>x2</view> -->
								</view>
							</view>
							<view class="tui-price-flex tui-size-24 mt15">
								<view class="font-color-sub">￥{{item.unit_price}}/件   共{{item.count}}件</view>
								<view class="font-color-red mt5">绩效提成￥{{item.salesmanCom}}</view>
							</view>
						</view>
						
					</view>
				</tui-list-cell>
				
			</block>
			<view class="tui-goods-info">
				<view class="tui-price-flex tui-size-24">
					<view>商品总额</view>
					<view>￥{{orderInfo.amount}}</view>
				</view>
				<view class="tui-price-flex mt10">
					<view class="tui-flex-shrink"> </view>
					<view class="tui-goods-price font-color-main">
						<view class="tui-size-24">实付合计：￥</view>
						<view class="tui-price-large">{{orderInfo.amount}}</view>
						<!-- <view class="tui-size-24">.00</view> -->
					</view>
				</view>
				<view class="tui-price-flex mt10">
					<view class="tui-flex-shrink"> </view>
					<view class="tui-goods-price font-color-red">
						<view class="tui-size-24 ">合计提成：￥</view>
						<view class="tui-price-large">{{orderInfo.salesmanCom}}</view>
						<!-- <view class="tui-size-24">.00</view> -->
					</view>
				</view>
			</view>
		</view>

		<view class="tui-order-info">
			<tui-list-cell :hover="false">
				<view class="tui-order-title">
					订单信息
				</view>
			</tui-list-cell>
			<view class="tui-order-content">
				<view class="tui-order-flex">
					<view class="tui-item-title">订单号:</view>
					<view class="tui-item-content">{{orderInfo.code}}</view>
					<view class="conter acea-row row-middle row-right">
					  {{ orderInfo.orderId || '' }}
					  <!-- <text class="copy copy-data" @click="copyClipboard(orderInfo.orderId)">复制</text> -->
					</view>
				</view>
				<!-- <view class="tui-order-flex">
					<view class="tui-item-title">物流单号:</view>
					<view class="tui-item-content">33655511251265578556</view>
				</view> -->
				<view class="tui-order-flex">
					<view class="tui-item-title">创建时间:</view>
					<view class="tui-item-content">{{orderInfo.createTime}}</view>
				</view>
				<!-- <view class="tui-order-flex">
					<view class="tui-item-title">付款时间:</view>
					<view class="tui-item-content">2019-05-26 10:44</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">发货时间:</view>
					<view class="tui-item-content">2019-05-27 10:20</view>
				</view -->
				<view class="tui-order-flex">
					<view class="tui-item-title">支付方式:</view>
					<view class="tui-item-content">微信支付</view>
				</view>
				<!-- <view class="tui-order-flex">
					<view class="tui-item-title">订单备注:</view>
					<view class="tui-item-content">麻烦尽快发货，打包包裹时请多拿几个泡沫放在纸箱盒内，防止摔碎</view>
				</view> -->
			</view>
			<!-- <tui-list-view unlined="bottom">
				<tui-list-cell unlined>
					<view class="tui-contact">
						<image src="https://thorui.cn/images/mall/group/icon_order_contactmerchant.png"></image>
						<text>联系商家</text>
					</view>
				</tui-list-cell>
			</tui-list-view> -->
		</view>
		<view class="tui-safe-area"></view>
		<!-- <view class="tui-tabbar tui-order-btn"> -->
			<!-- <view class="tui-btn-mr">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle">删除订单</tui-button>
			</view> -->
			<!-- <view class="tui-btn-mr">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="refund">申请售后</tui-button>
			</view> -->
			<!-- <view class="tui-btn-mr">
				<tui-button type="danger" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="btnPay">立即支付</tui-button>
			</view>-->
		<!-- </view> -->
	</view>
</template>

<script>
	const STATUS = ['待付款', '待发货', '待收货', '已送达']
	import {
	  orderDetail
	} from "@/apis/user";
	export default {
		
		data() {
			return {
				id:0,
				//1-待付款 2-付款成功 3-待收货 4-订单已完成 5-交易关闭
				status: 1,
				show: false,
				orderInfo: {},
			}
		},
		onShow() {
		  this.id = this.$yroute.query.id;
		  this.getDetail();
		},
		mounted: function () {
		  this.id = this.$yroute.query.id;
		  // this.getDetail();
		},
		methods: {
			
			getDetail:function(){
				const id = this.id;
				  if (!id) {
				    uni.showToast({
				      title: "订单不存在",
				      icon: "none",
				      duration: 2000,
				    });
				    return;
				  }
				  orderDetail(id)
				    .then((res) => {
				      this.orderInfo = res.data;
				      
				    })
				    .catch((err) => {
				      uni.showToast({
				        title: err.response.data.msg,
				        icon: "none",
				        duration: 2000,
				      });
				    });
				},
			
			
		}
	}
</script>

<style>
	.container {
		padding-bottom: 118rpx;
	}

	.tui-order-header {
		width: 100%;
		height: 160rpx;
		position: relative;
		background-color: #EB0909;
	}

	.tui-img-bg {
		width: 100%;
		height: 160rpx;
	}

	.tui-header-content {
		width: 100%;
		height: 160rpx;
		position: absolute;
		z-index: 10;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 70rpx;
		box-sizing: border-box;
	}

	.tui-status-text {
		font-size: 34rpx;
		line-height: 34rpx;
		color: #FEFEFE;
	}

	.tui-reason {
		font-size: 24rpx;
		line-height: 24rpx;
		color: rgba(254, 254, 254, 0.75);
		padding-top: 15rpx;
		display: flex;
		align-items: center;
	}

	.tui-reason-text {
		padding-right: 12rpx;
	}

	.tui-status-img {
		width: 80rpx;
		height: 80rpx;
		display: block;
	}

	.tui-flex-box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-icon-img {
		width: 33rpx;
		height: 33rpx;
		flex-shrink: 0;
	}

	.tui-logistics {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 24rpx 0 20rpx;
		box-sizing: border-box;
	}

	.tui-logistics-text {
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-logistics-time {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 16rpx;
		color: #666
	}

	.tui-addr {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.tui-addr-userinfo {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: bold;
	}

	.tui-addr-text {
		font-size: 24rpx;
		line-height: 32rpx;
		padding-top: 16rpx;
	}

	.tui-addr-tel {
		padding-left: 40rpx;
	}

	.tui-order-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		line-height: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}


	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-image {
		width: 148rpx;
		height: 148rpx;
		display: block;
		flex-shrink: 0;
		border-radius: 8rpx;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #888888;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color: #888888;
		line-height: 30rpx;
	}

	.tui-color-red {
		color: #E41F19;
		padding-right: 30rpx;
	}

	.tui-goods-price {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		font-size: 24rpx;
	}

	.tui-size-24 {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-price-large {
		font-size: 28rpx;
		line-height: 28rpx;
	}

	.tui-goods-info {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.tui-price-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-size24 {
		padding-bottom: 20rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #888;
	}

	.tui-size32 {
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: 500;
	}

	.tui-pbtm20 {
		padding-bottom: 20rpx;
	}

	.tui-flex-shrink {
		flex-shrink: 0;
	}

	.tui-primary-color {
		color: #2FCC71;
	}

	.tui-order-info {
		margin-top: 20rpx;
	}

	.tui-order-title {
		position: relative;
		font-size: 28rpx;
		line-height: 28rpx;
		padding-left: 12rpx;
		box-sizing: border-box;
	}

	/* .tui-order-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		border-left: 4rpx solid #EB0909;
		height: 100%;
	} */

	.tui-order-content {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		background: #fff;
		font-size: 24rpx;
		line-height: 30rpx;
	}

	.tui-order-flex {
		display: flex;
		padding-top: 18rpx;
	}

	.tui-order-flex:first-child {
		padding-top: 0
	}

	.tui-item-title {
		width: 132rpx;
		flex-shrink: 0;
	}

	.tui-item-content {
		color: #666;
		line-height: 32rpx;
	}

	.tui-safe-area {
		height: 1rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-tabbar {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 996;
	}

	.tui-btn-mr {
		margin-right: 30rpx;
	}
	.tui-contact{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}
	.tui-contact image{
		width: 36rpx;
		height: 36rpx;
		margin-right: 16rpx;
	}
</style>
